<template>
  <div class="typical-case">
    <div class="typical-case-item" v-for="item in typicalCase">
      <div class="type-block">
        <div class="type-text">{{item.type}}</div>
        <div class="time">{{item.time}}</div>
      </div>
      <div class="title">{{item.title}}</div>
      <div class="desc">{{item.desc}}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'TypicalCase',
  data(){
    return{
      typicalCase:[
        {type:'邻里纠纷',title:'楼上漏水引发赔偿纠纷',desc:'楼上住户水管破裂导致楼下装修受损，双方就赔偿金额产生分歧',time:'2024-03-15'},
        {type:'家庭纠纷',title:'老人赡养问题调解',desc:'子女对老人赡养责任分配存在争议，老人生活得不到保障',time:'2024-03-10'},
        {type:'经济纠纷',title:'装修合同纠纷调解',desc:'装修公司未按合同约定完成工程，业主拒绝支付尾款。',time:'2024-03-05'},
        {type:'邻里纠纷',title:'楼上漏水引发赔偿纠纷',desc:'楼上住户水管破裂导致楼下装修受损，双方就赔偿金额产生分歧',time:'2024-02-17'},
        {type:'家庭纠纷',title:'老人赡养问题调解',desc:'子女对老人赡养责任分配存在争议，老人生活得不到保障',time:'2024-02-13'},
        {type:'经济纠纷',title:'装修合同纠纷调解',desc:'装修公司未按合同约定完成工程，业主拒绝支付尾款。',time:'2024-02-05'},
      ]
    }
  }
}
</script>
<style scoped lang="scss">
.typical-case{
  width: 100%;
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 4px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0,198,255,.3);
  }
  &::-webkit-scrollbar-track{
    border-radius: 3px;
    background: rgba(0,24,48,.3);
  }
  .typical-case-item{
    width: 100%;
    padding:10px 15px;
    border-radius: 8px;
    border: 1px solid #32B4FF;
    background: #06213B;
    margin-bottom: 10px;
    .type-block{
      width: 100%;
      display: flex;
      align-items: center;
      .type-text{
        font-weight: bold;
        color: #32B4FF;
        flex-grow: 1;
      }
      .time{
        color: #fff;
        font-size: 14px;
      }
    }
    .title{
      color: #fff;
      margin: 5px 0;
    }
    .desc{
      color: #fff;
      font-size: 14px;
    }
  }
}
</style>
